<script setup>
import { ref, computed } from 'vue'
import { getUserCrowdFundingList } from '@/api/crowdFunding'



// const dialogFormVisible = ref(false)
const userCrowdFundingList = ref([])

// 获取用户众筹
function getUserCrowdFundingLists() {
    getUserCrowdFundingList().then(res => {
    console.log(res.data)
    userCrowdFundingList.value = res.data.data.data;
    pageTotal.value = res.data.data.pageTotal;
    pagePages.value = res.data.data.pagePages;
  })
}
getUserCrowdFundingLists();

//分页
const pageTotal = ref(0);
const pagePages = ref(1);
const currentPage = ref(1);
const pageSize = ref(3);

// 计算当前页数据
const currentCrowdFundinglist = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return userCrowdFundingList.value.slice(start, start + pageSize.value);
});
// 监听页码改变
function handleSizeChange(newSize) {
    pageSize.value = newSize;
    getUserCrowdFundingLists()
    console.log(`每页 ${newSize} 条`)
}
// 监听页码改变
function handleCurrentChange(newPage) {
    pagePages.value = newPage;
    getUserCrowdFundingLists()
    console.log(`当前页: ${newPage}`)
}

// 用户众筹详情


// 详情模态框控制
const detailDialog = ref(false)
// 详情数据
const form  = ref({})
const findProject = (project_id) => {
  // 查找匹配的产品
  form.value = userCrowdFundingList.value.find(project => project.project_id === project_id);
};
// 详情模态框
function lookDetail(project_id) {
  detailDialog.value = true;
  findProject(project_id);
}

// 删除众筹
// function deleteCrowdFunding(project_id) {
//   deleteCrowdFunding(project_id).then(res => {
//     if (res.code === 200) {
//       ElMessage.success('删除成功')
//       getUserCrowdFundingList()
//     }
//   })
// }

</script>

<template>
    <el-card class="page-container">
        <h2 style="padding-left: 30px;">众筹管理</h2>
        <hr style="margin-bottom: 20px;">
        <div v-for="item in currentCrowdFundinglist" :key="item.project_id" class="course">
            <ul>
                <div class="good-item">
                    <img :src="item.picture" style="height: 100px; width: 100px;">
                    <li ><h3>{{ item.project_name }}</h3></li>
                    <li >{{ item.goodname }}</li>
                    <li >目标数量：{{ item.target_quantity }}</li>
                    <li >¥ {{ item.price }}</li>
                    <li >当前数量：{{ item.current_quantity }}</li>
                    <li >{{ item.status }}</li>
                    <br>
                    <el-button style="width: 70px; margin-right: -25px;">
                      <div @click="lookDetail(item.project_id)">查看详情</div>
                    </el-button>
                    <el-button style="width: 70px; margin-right: 5px;">
                      <div @click="deleteCrowdFunding(item.project_id)">删除</div>
                    </el-button>
                </div>
            </ul>
        </div>
        <!--分页区域-->
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="sizes,prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="position: absolute ;bottom: 30px; margin-top: 30px; margin-left: 20%;"
        />
    </el-card>

  <!-- 众筹详情窗口 -->
    <el-dialog title="众筹详情" v-model="detailDialog" width="45%" style="margin-top: 30px;">
      <el-form :model="form" label-width="80px">
        <el-form-item label="众筹名称">
          <el-input v-model="form.project_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="众筹商品">
          <el-input v-model="form.goodname" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="商品图片">
          <img :src="form.picture" alt="" width="100px" height="100px">
       </el-form-item>
       <el-form-item label="众筹描述">
          <el-input v-model="form.description" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="众筹目标">
          <el-input v-model="form.target_quantity" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="当前数量">
          <el-input v-model="form.current_quantity" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="众筹价格">
          <el-input v-model="form.price" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="众筹状态">
          <el-input v-model="form.status" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="众筹时间">
          <el-input v-model="form.start_time" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="结束时间">
          <el-input v-model="form.end_time" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="众筹人数">
          <el-input v-model="form.count" :disabled="true"></el-input>
       </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialog = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    
  </template>
  

  <style lang="scss" scoped>

  .page-container {
    min-height: 100%;
    box-sizing: border-box;
    position: relative;
  
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .course {
    height: 120px;
    padding: 0; /* 去掉默认的内边距 */
    list-style-type: none; /* 去掉默认的列表样式 */
    align-items: center; /* 垂直居中对齐 */

    .good-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffecec;
      border-radius: 5px;
    }

    ul{
        height: 120px;

        li{
            padding-top: -20px;
            display: inline-block; /* 设置为 inline-block */
            margin: 0 10px; /* 项之间的间距 */
        }
    } 
  }
  .img {
    width: 100px;
    height: 100px;
  }
  </style>
  